<template>
  <base-breadcrumb>
    <div class="about-master-container" v-loading="loading">

      <a-card>
        <title-name title="基础信息" />
        <a-form-model>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="月份">
                <BaseInput v-model="form.month" disabled />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>

      <a-card>
        <title-name title="在建项目情况" />
        <div class="l-table">
          <div class="item label">在建项目数</div>
          <div class="item">{{ form.safetyMonthReportProject.constructionSize }}</div>
          <div class="item label">施工面积（万㎡）</div>
          <div class="item">{{ form.safetyMonthReportProject.projectMj }}</div>
          <div class="item label">施工里程数（km）</div>
          <div class="item">{{ form.safetyMonthReportProject.projectKm }}</div>
          <div class="item label">开工准备项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.startProjectSize }}</div>
          <div class="item label">在施项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.inProjectSize }}</div>
          <div class="item label">竣工收尾项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.completionProjectSize }}</div>
          <div class="item label">停工项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.stopProjectSize }}</div>
          <div class="item label">海外项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.overseasProjectSize }}</div>
          <div class="item label">房建类项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.houseProjectSize }}</div>
          <div class="item label">线性基础设施类项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.linearProjectSize }}</div>
          <div class="item label">总承包施工项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.totalProjectSize }}</div>
          <div class="item label">专业承包项目数量</div>
          <div class="item">{{ form.safetyMonthReportProject.majorProjectSize }}</div>
        </div>
      </a-card>

      <a-card>
        <title-name title="安全风险情况" />
        <a-table
          :columns="columns1"
          :data-source="form.safetyMonthReportRisks"
          :pagination="false"
        />
      </a-card>

      <a-card>
        <title-name title="机械设备情况" />
        <a-table
          :columns="columns2"
          :data-source="form.safetyMonthReportEquipments"
          :pagination="false"
        />
      </a-card>

      <a-card>
        <title-name title="安监队伍情况" />
        <a-table
          :columns="columns3"
          :data-source="form.safetyMonthReportPeople"
          :pagination="false"
        />
      </a-card>

      <a-card>
        <title-name title="监督检查情况" />
        <a-table
          :columns="columns4"
          :data-source="form.safetyMonthReportChecks"
          :pagination="false"
        />
      </a-card>

      <div class="pull-right page-btn-right-top">
        <a-button @click="$close">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>
<script>
import { getSafetyMonthReportById } from '@/api/safetySupervision/other/monthReport'

export default {
  name: 'detail',
  components: {},
  data() {
    return {
      loading: false,
      form: {
        safetyMonthReportProject: {},
        safetyMonthReportRisks: [],
        safetyMonthReportPeople: [],
        safetyMonthReportEquipments: [],
        safetyMonthReportChecks: []
      },
      columns1: [
        { title: '分公司', dataIndex: 'branchComName' },
        { title: '局控风险项目数量', dataIndex: 'bureauRiskSize' },
        { title: '一级风险数量', dataIndex: 'firstRiskSize' },
        { title: '一级高支模及脚手架风险数量', dataIndex: 'hightRiskSize' },
        { title: '一级工具式模板工程及附着式脚手架工程风险数量', dataIndex: 'toolRiskSize' },
        { title: '一级起重机械安装拆卸及起重吊装风险数量', dataIndex: 'liftingRiskSize' },
        { title: '一级暗挖工程风险数量', dataIndex: 'underRiskSize' },
        { title: '一级拆除工程风险数量', dataIndex: 'tearRiskSize' }
      ],
      columns2: [
        { title: '分公司', dataIndex: 'branchComName' },
        { title: '一类机械设备数量', dataIndex: 'firstEquipmentNum' },
        { title: '塔式起重机数量', dataIndex: 'towerCraneNum' },
        { title: '其他起重机械数量', dataIndex: 'otherCraneNum' },
        { title: '施工升降机数量', dataIndex: 'constructLiftNum' },
        { title: '地下施工机械设备数量', dataIndex: 'underConstructNum' }
      ],
      columns3: [
        { title: '组织', dataIndex: 'branchComName' },
        { title: '安监人员数量', dataIndex: 'personNum' },
        { title: '人均监管面积', dataIndex: 'regulatoryArea' },
        { title: '人均监管里程', dataIndex: 'regulatoryMilestones' },
        { title: '注册安全工程师', dataIndex: 'safetyEngineer' },
        { title: 'A/Y类员工数量', dataIndex: 'ayPerson' },
        { title: '机关安监人员数量', dataIndex: 'orgSafetyPerson' },
        { title: '项目安全总监数量', dataIndex: 'projectSafetyPerson' },
        { title: '本月新增安监人员数', dataIndex: 'addSafetyPerson' },
        { title: '本月新增A/Y类安监人员数', dataIndex: 'addAyPerson' },
        { title: '本月离职/退休人员数量', dataIndex: 'outPerson' },
        { title: '本月项目安全总监及以上职级离职/退休人员数量', dataIndex: 'projectMonthPerson', width: '10%' }
      ],
      columns4: [
        { title: '组织', dataIndex: 'branchComName' },
        { title: '安全检查次数', dataIndex: 'safetyCheckSize' },
        { title: '检查项目数量', dataIndex: 'checkProjectSize' },
        { title: '排查零容忍隐患数量', dataIndex: 'dangerSize' },
        { title: '下发红黄牌数量', dataIndex: 'redYellowSize' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getData()
    }
  },
  methods: {
    async getData() {
      this.loading = true
      let res = await getSafetyMonthReportById({ id: this.form.id })
      this.loading = false
      if (res.code === 200) {
        this.form = res.data
        if (!this.form.safetyMonthReportProject) this.form.safetyMonthReportProject = {}
      }
    }
  }
}
</script>

<style lang="less">
.l-table {
  display: grid;
  grid-template-columns: repeat(4, 25%);

  .label {
    background: #f1f1f1;
    //color: #9e9e9e;
  }

  .item {
    border: 1px solid #e1e1e1;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>